<template>
	<view>
		<swiper indicator-dots :duration="duration" class="swiperStyle" @change="swiperChange($event)">
			<swiper-item v-for="(item, index) in imgList" :key="index" class="swiperItem">
				<image :src="item" mode="" class="item_img"></image>
				<block v-if="index == imgList.length-1">
					<button type="primary" :size="mini" class="experience" @tap="btnSkip()">立刻体验</button>
				</block>
			</swiper-item>
		</swiper>
		<button type="primary" size="mini" class="skip" v-show="current !== imgList.length-1" @tap="btnSkip()">跳过</button>
	</view>
</template>

<script>
	const duration = 500; //动画时长控制
	export default {
		data() {
			return {
				current: 0, //swiper的index
				//注意所有元素都是绝对定位
				onReady: false,
				duration,
				imgList:[
					'../../static/temp/ad-splash.png',
					'../../static/temp/ad-splash.png',
					'../../static/temp/ad-splash.png',
					'../../static/temp/ad-splash.png'
				]
			};
		},
		methods:{
			swiperChange(e) {
				this.current = e.detail.current
			},
			//点击跳过
			btnSkip() {
				uni.setStorageSync('ifLaunch', true);
				uni.reLaunch({
					url: '../index/index'
				})
				
			}
		},
		onReady() {
			this.onReady = true;
		}
	}
</script>

<style scoped>
	button::after {
		border: none;
	}
	.swiperStyle{
		height: 100vh;
		width: 100vw;
	}
	.swiperItem{
		position: relative;
	}
	.item_img{
		width: 100%;
		height: 100%;
	}
	.experience{
		position: absolute;
		transition:all 1s;
		transform:translate(-50%, 0) scale(1,1);
		opacity:1;
		bottom:15%;
		left:50%;
		background-color:#33cc33;
		color:#ffffff;
		border-radius:15px;
	}
	.skip{
		position: absolute;
		top:10%;
		right:10%;
		background-color:rgba(255,255,255,.6);
		color: #666666;
		border-radius: 8px;
	}

</style>
